<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style>
		body{
			background-color: #f2f2f2
			;
		}
		header{
			width: 100%;
			height: 50px;
			background-color: white;
		}
		.logo{
			float: left;
			height: 50px;
			position: absolute;
			display: flex;
		}
		ul{
			      margin-top: 13px;
    margin-left: 392px;
    position: absolute;
		}
		li{
			    float: left;
    padding-left: 72px;
    list-style: none;
		}
		li a{
			display:block;
			text-decoration:none;
			color: black;
		}
		.pick1{
			    width: 77px;
    height: 42px;
    margin-left: 10px;
		}
		.pick2{
			width: 77px;
    height: 42px;
    background-color: #89ae00;
		}
		.frist{
			        width: 99%;
    height: 105px;
    top: 76px;
    position: absolute;
		}
		.comtact_form ul{
				width: 750px;
				list-style: none;
				top: 188px;
				padding-left: 51px;
				height: 546px;
				background-color: white;
			}
		.right1{
			top: 10px;
			padding-left: 562px;
			color: #9bc287;
			
		}
	.picture{
		top:59px;
		margin-left:224px;
		position: absolute;
	}
.numb{
	width: 42px;
	height: 35px;
	top: 53px;
	position: absolute;
	padding-left: 10px;
	border-top:1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-bottom:1px solid #cccccc;
	border-right:1px solid #cccccc;
	margin-left: 254px;
	line-height: 31px;
}
.tel{
	width: 254px;
	height:31px;
	top:53px;
	position: absolute;
	padding-left:11px;
	text-align: left;
	margin-left: 308px;
	border: 1px solid #cccccc;
}
.check{
	width: 239px;
	height:31px;
	top:110px;
	position: absolute;
	padding-left:11px;
	text-align: left;
	margin-left:220px;
	border: 1px solid #cccccc;
}
.please{
	width: 239px;
	height:31px;
	top:160px;
	position: absolute;
	padding-left:11px;
	text-align: left;
	margin-left:220px;
	border: 1px solid #cccccc;
}
.miss{
	width: 345px;
	height:31px;
	top:211px;
	position: absolute;
	padding-left:11px;
	text-align: left;
	margin-left:220px;
	border: 1px solid #cccccc;
}
.nook{
	display: flex;
    border-radius: 5px
;
    height: 35px
;
    width: 95px
;
    background-color: #9bc200;
    text-decoration: none;
    
    justify-content: center;
    align-items: center;
    margin-top: 17px;
    margin-left: 484px;
}
.nook a{
	text-decoration: none;
	color: #fff;
}
.miss1{
	width: 345px;
	height:31px;
	top:266px;
	position: absolute;
	padding-left:11px;
	text-align: left;
	margin-left:220px;
	border: 1px solid #cccccc;
}
.pickthis{
	width: 46%;
    height: 60px
;
    border: 0;
    background-color: #9bc200;
    border-radius: 5px
;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
    top: 323px;
    position: absolute;
    margin-left: 215px;
}
	</style>
	</head>
	<body>
	<header>
		<img src="./img/logo.png"class="logo">
		<ul>
			<li><a href="#">APP开发平台</a></li>
			<li><a href="#">APP定制服务</a></li>
			<li><a href="#">开发者社区</a></li>
			<li><a href="#">VIP服务</a></li>
			<li><a href="#">案例</a></li>
		</ul>
		<a href="#"><input type="submit" value="登录" style="float: right;"class="pick1"/></a>
		<a href="#"><input type="submit" value="注册" style="float: right;"class="pick2"/></a>
		<img src="./img/bg.png"class="frist">
		<h1 style="color: white;margin-top: 100px;position: absolute;margin-left: 435px;">短信重置密码</h1>
	</header>	
	<form class="comtact_form"method="get">
				<ul>
					<a href="#"style="text-decoration: none;"><p class="right1">邮箱重置密码>></p></a>
					<div class="form-group mt-2 d-inline-block" style="padding: 2px;">
                        <span class="picture"><img src="./img/flag_china.png"></span>
                        <span class="numb">+86</span>
                        <input type="text" class="tel" placeholder="请输入手机号码">
                        <input type="text"class="check"placeholder="验证码" />
                        <img src="img/yanzheng.png"style="width: 97px;height: 34px;display: flex;margin-top: 54px;margin-left: 480px;">
                        <input type="text"class="please"placeholder="请输入手机验证码" />
                        <input type="password"class="miss" placeholder="密码"/>
                        <div class="nook">
                        	<a href="#">获取验证码</a>
                        </div>
                        <input type="password"class="miss1" placeholder="重复密码"/>
                        <a href="#"><input type="submit"value="确认"class="pickthis"/></a>
                        <a href="#"><p style="color: #999999;margin-top: 204px;margin-left: 381px;text-decoration: none;">返回</p></a>
                    </div>
				</ul>
			</form>
	</body>
	   
</html>
